<script setup>
import { defineProps, defineEmits } from 'vue'

/* 接收并渲染item */
const props = defineProps({
  item: {
    type: Object,
    required: true
  }
})

/* 暴露两种事件 */
const emit = defineEmits(['delete', 'edit-it'])

/* 删除事件 */
function deleteItem() {
  emit('delete', props.item.id)
}

/* 修改事件 */
function editItemRequest() {
  emit('edit-it', props.item.id)
}
</script>

<template>
  <span>{{ item.text }}</span>
  <button @click="editItemRequest">Edit</button>
  <button @click="deleteItem">Delete</button>
</template>


<style scoped>
span {
  flex-grow: 1;
  max-width: 270px;
}

button {
  background-color: #fff020;
  color: rgb(0, 0, 0);
  border: none;
  padding: 10px;
  cursor: pointer;
  margin-left: 10px;
}

button:hover {
  background-color: #ccc017;
}
</style>